<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button @click="Editing = !Editing" size="mini" type="info">{{
          Editing ? "取消" : "编辑"
        }}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          @click="hClickMyChannel(item, idx)"
          v-for="(item, idx) in channels"
          :key="idx"
          :class="{ cur: activeIndex === idx }"
        >
          <span>{{ item.name }}</span>
          <!-- 我的频道  推荐不显示 X ixcon  判断当前的下标 -->
          <van-icon
            v-show="Editing && idx !== 0"
            name="cross"
            class="btn"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          @click="hAddChannel(item)"
          v-for="item in recommendChannels"
          :key="item.id"
        >
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChannelEdit',
  //   props: ["channels"],
  // props: ["channels", "activeIndex"],
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
      // default: 0,
      // vaildator(val) {}
    }
  },
  data () {
    return {
      // 是否处于编辑状态
      Editing: false,
      allChannels: []
    };
  },
  computed: {
    //   获取全部没有选中的频道
    recommendChannels () {
      const result = this.allChannels.filter((channel) => {
        // channel.name !== this.channels.name;
        //  判断 全部频道中是否包含 已选的频道频道 不包含返回-1
        const idx = this.channels.findIndex((item) => item.id === channel.id);
        return idx === -1;
      });
      return result;
    }
  },
  created () {
    console.log('父组件传过来的', this.channel);
    this.getChannels();
  },
  methods: {
    // 用户再某个频道上做了点击 ----可选频道
    async hAddChannel (v) {
      console.log(v);
      //  在用户原来的订阅频道基础上添加这频道
      let curChannelList = [...this.channels, v];
      //   映射成要求的参数;
      curChannelList = curChannelList.map((item, index) => {
        return {
          id: item.id,
          seq: index
        };
      });
      //   去掉推荐频道
      curChannelList.splice(0, 1);
      console.log(curChannelList);
      try {
        const res = await this.api.addChannel(curChannelList);
        console.log('xiugai', res);
      } catch (err) {
        console.log(err);
      }
      //   更新试图 全部频道
      this.channels.push(v);
      // 1、修改有订阅频道：多出一项
      // 2、修改 可选频道： 减少一项
      //   由于计算属性 recommendChannels 的计算过程依赖于this.channels 当this.channels 变化时
      //   计算属性会重新执行，所以  可选频道会自动减少一项
      //   3、他会修改父组件中的channels,  原因是channels 本身就是通过props 传递过来的引用类型数据
      //  会直接导致父组件中的频道列表多出一项
    },
    // 两种情况 普通状态，则是切换频道
    // 目标 1、关闭弹层 2、切换到当前点击的频道上去
    // 这两件事情 都应该是父组件来做
    // 2、如果 是编辑状态 则是删除频道
    //   跳转选中的频道 给父组件传递当前选中的 频道 下标
    async hClickMyChannel (item, idx) {
      if (this.Editing) {
        // 推荐频道不可以删除
        if (item.id === 0) {
          return;
        }
        // 1、请求接口 不再订阅这个频道
        const res = await this.api.deleteChannel(item.id);
        console.log('删除频道', res);
        // 2、 更新视图
        // 从已订阅的 频道删除选中的频道
        // this.channels.splice(index, 1);
        this.channels.splice(idx, 1);

        // 1、修改有订阅频道：多出一项
        // 2、修改 可选频道： 减少一项

        // bug
        // 如果当前要删除 的频道 再当前 选中的频道之前 则还要去修改一下父组件中的activeIndex
        if (idx < this.activeIndex) {
          this.$emit('undateCurIndex', this.activeIndex - 1);
        }
      } else {
        // 抛出事件
        this.$emit('updateCurChannel', item);
      }
    },
    //   获得全部频道
    async getChannels () {
      try {
        const {
          data: { data }
        } = await this.api.getChannels();
        this.allChannels = data.channels;
        console.log('所有频道', this.allChannels);
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
// 高亮显示
.cur {
  color: red;
  font-weight: bold;
}
</style>
